<template>
  <div class="content">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="logo">
          <img @click="handerHome" :src="require('@/assets/index.png')" alt="" />
          <div class="nkun">{{ baseInfo.name }}</div>
        </div>
        <div v-if="!isLogin">
          <el-link type="primary" @click="handelLogin">登录</el-link>
          <span>&nbsp;|&nbsp;</span>
          <el-link type="primary" @click="register">注册</el-link>
        </div>
        <!-- 下拉菜单 -->
        <div v-else style="user-info" class="un-info">
          <Avatar
            class="u-avatar"
            :key="Math.random().toString()"
            :avatar="{
              id: -1,
              username:
                userInfo.nickname && userInfo.nickname.length > 0
                  ? userInfo.nickname
                  : userInfo.username,
              txcolor: userInfo.txcolor,
              bgcolor: userInfo.bgcolor,
            }"
          />
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link un">
              {{
                userInfo.nickname && userInfo.nickname.length > 0
                  ? userInfo.nickname
                  : userInfo.username
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleProfile"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item command="handleAbout"
                >关于我们</el-dropdown-item
              >
              <el-dropdown-item command="handlelogout"
                >注销登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-container class="body-main">
        <!-- 栏目（文章分类） -->
        <el-aside v-if="$route.fullPath === '/'" class="classify-aside">
          <div class="classify">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>栏目</span>
              </div>
              <div class="classify-list">
                <ul>
                  <li
                    v-for="(item, key) in classifyList"
                    :key="key"
                    @click="handelClassify(item.articleClassName)"
                  >
                    {{ item.articleClassName }}
                  </li>
                </ul>
              </div>
            </el-card>
          </div>
        </el-aside>
        <el-container class="details-body" v-if="$route.name === 'article'">
          <!-- 文章详情 -->
          <el-main class="article-content">
            {{ articleList.content }}
            <!-- 显示文章内容 -->
            <router-view />
            <!-- 点赞、评论icon图标 -->
            <Divider
              :like="like"
              :commentcount="commentcount"
              @focusev="commentfocus = true"
              class="divider"
            />
          </el-main>
          <!-- 评论 -->
          <el-footer class="detail-pl">
            <Comment
              @commentcount="getCommentCount"
              :commentfocus="commentfocus"
            />
          </el-footer>
        </el-container>

        <el-main v-if="$route.fullPath === '/'">
          <!-- 轮播 -->
          <Carousel :pics="baseInfo.pics" />

          <!-- 文章列表 -->
          <h2>{{ classifying }}</h2>
          <div>
            <ul class="content-list">
              <li v-for="item in articleList" :key="item.id" class="article">
                <div class="find-content">
                  <el-link
                    @click="handelDetails(item.id, item.likeNum)"
                    target="_blank"
                    class="title"
                    >{{ item.articleTitle }}</el-link
                  >
                </div>

                <p v-texthidden class="content">
                  <img
                    :src="item.resoutceName | getImageUrlFilter"
                    align="left"
                    hspace="5"
                    vspace="5"
                    width="160px"
                    alt=""
                    class="fm"
                  />
                  {{ item.content | contentFilter }}
                </p>

                <div class="article-ss">
                  <div>
                    <span class="tl">点赞数量:</span>
                    <span>{{ item.likeNum }}</span>
                  </div>
                  <div>
                    <span class="tl">评论数量:</span>
                    <span>{{ item.commentNum }}</span>
                  </div>

                  <div>
                    <span class="tl">浏览数量:</span>
                    <span>{{ item.redaNumber }}</span>
                  </div>
                  <div>
                    <span class="tl">发布时间:</span>
                    <span>{{ item.createdTime }}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="fyq">
            <el-pagination
              @current-change="handleIndex"
              :current-page="pager.pageIndex"
              layout="total, prev, pager, next"
              :total="pager.count"
              background
            >
            </el-pagination>
          </div>
        </el-main>

        <el-aside class="recommend">
          <!-- 今日热榜 -->
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>今日热榜 ଘ(੭ˊᵕˋ)੭</span>
            </div>

            <div class="classify-list">
              <ul>
                <router-link
                  class="tj-li"
                  v-for="(item, index) in hotArticleList"
                  :key="item.id"
                  :to="'/article/details/' + item.id"
                  tag="li"
                >
                  <el-link target="_blank" class="title"
                    ><span>{{ index + 1 }}.&nbsp;</span
                    >{{ item.title }}</el-link
                  >
                </router-link>
              </ul>
            </div>
          </el-card>
          <!-- 本周点赞榜 -->
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>点赞榜 ଘ(੭ˊᵕˋ)੭</span>
            </div>
            <div class="classify-list">
              <ul>
                <router-link
                  class="tj-li"
                  v-for="(item, index) in goodArticleList"
                  :key="item.id"
                  :to="'/article/details/' + item.id"
                  tag="li"
                >
                  <el-link target="_blank" class="title"
                    ><span>{{ index + 1 }}.&nbsp;</span
                    >{{ item.title }}</el-link
                  >
                </router-link>
              </ul>
            </div>
          </el-card>
          <!-- 本周评论榜 -->
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>评论榜 ଘ(੭ˊᵕˋ)੭</span>
            </div>
            <div class="classify-list">
              <ul>
                <router-link
                  class="tj-li"
                  v-for="(item, index) in commentArticleList"
                  :key="item.id"
                  :to="'/article/details/' + item.id"
                  tag="li"
                >
                  <el-link target="_blank" class="title"
                    ><span>{{ index + 1 }}.&nbsp;</span
                    >{{ item.title }}</el-link
                  >
                </router-link>
              </ul>
            </div>
          </el-card>
        </el-aside>
      </el-container>

      <el-footer class="footer">
        <div class="presentation">
          <div class="pr-left">
            <div>
              <img :src="require('@/assets/index.png')" height="60px" alt="" />
              <span class="un-footer">{{ baseInfo.name }}</span>
            </div>
            <div class="pt-content">
              <span>{{ baseInfo.presentation }}</span>
            </div>
          </div>

          <div class="pr-right">
            <h3>关于我们</h3>
            <div class="tp">
              <div class="wx-about">
                <i class="cms-weixin fontFamily-24" style="font-size: 50px"></i>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="baseInfo.wxurl"
                  fit="cover"
                ></el-image>
              </div>

              <div class="qq-about">
                <i class="cms-QQ fontFamily-24" style="font-size: 50px"></i>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="baseInfo.qqurl"
                  fit="cover"
                ></el-image>
              </div>
            </div>
          </div>
        </div>
        <div class="beian">
          <div class="webset">
            网站 {{ baseInfo.url }} 电话 {{ baseInfo.phone }} 邮箱
            {{ baseInfo.mailbox }}
          </div>
          <div class="">
            {{ baseInfo.websiteICP }} | 京ICP备12020869号-2 |
            {{ baseInfo.putOnRecords }}
          </div>
          <div>{{ baseInfo.remarks }}</div>
        </div>
      </el-footer>
    </el-container>

    <Useprofile :dialog="dialog" @dialogEvt="handelDialog" />
  </div>
</template>
<style>
.el-card__body {
  padding-bottom: 100px !important;
}
</style>
<style lang="scss" scoped>
.logo {
  position: relative;
  width: 200px;
  img {
    width: 50px;
    height: 50px;
  }
  img:hover {
    cursor: pointer;
  }

  .nkun {
    position: absolute;
    font-weight: bold;
    font-size: 18px;
    color: #535353;
    top: 12px;
    left: 50px;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  }
}
.el-header {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .un-info {
    // margin-top: 23px;
    width: 100px;
    display: flex;
    align-content: center;
    justify-content: center;
    .el-dropdown {
      min-width: 60px;
      padding-top: 15px;
      margin-left: 10px;
    }
  }
}
.body-main {
  justify-content: space-around;
  padding: 0 10px;

  .fyq {
    display: flex;
    justify-content: center;
    padding-top: 100px;
  }

  .details-body {
    .article-content {
      min-height: 860px;
      border-bottom: 1px solid #dad4d4;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      .divider {
        margin-top: 250px;
      }
    }
  }
  .detail-pl {
    height: auto !important;
    max-width: 840px;
    margin-bottom: 50px;
  }
  .content-list {
    list-style-type: none;
    margin: 50px;

    .article {
      margin-bottom: 50px;
      //     max-height: 200px;
      //     min-height: 100px;
      // overflow: hidden;

      .fm {
        margin-right: 6px;
      }

      .find-content {
        margin-bottom: 10px;
      }
      .title {
        font-size: 18px;
        font-weight: bold;
      }

      p {
        color: #555555;
      }

      .content {
        position: relative;
        // padding: 2px;
        line-height: 25px;
        max-height: 175px;
        overflow: hidden;
      }

      .content::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        // padding-left: 40px;

        background: -webkit-linear-gradient(left, transparent, #fff 55%);

        background: -o-linear-gradient(right, transparent, #fff 55%);

        background: -moz-linear-gradient(right, transparent, #fff 55%);

        background: linear-gradient(to right, transparent, #fff 55%);
      }

      .article-ss {
        display: flex;
        margin-top: 10px;
        justify-content: flex-end;
        color: #555555;
        font-size: 14px;

        .tl {
          margin: 0px 6px;
        }
      }
    }
  }
}
.recommend {
  margin-top: 20px;
  ul {
    list-style-type: none;
  }
  .el-card {
    min-height: 220px;
    margin-bottom: 20px;
  }
  .tj-li {
    padding: 10px 2px 0px 2px;
  }
}

.el-main {
  min-height: 1300px;
  max-width: 800px !important;
  background-color: #ffffff;
  border-left: 1px solid #dad4d4;
  border-right: 1px solid #dad4d4;
  margin: 20px;
}
section.el-container.details-body.is-vertical {
  margin-left: 60px;
}
.footer {
  margin-top: 100px;
  background-color: #f3f3f3;
  height: 410px !important;
  border-top: 1px solid #dad4d4;
  .presentation {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .pt-content {
      font-size: 12px;
      width: 530px;
    }

    .pr-left {
      position: relative;
      .un-footer {
        top: 12px;
        font-size: 20px;
        color: #3f3e3e;
        font-weight: bold;
        position: absolute;
      }
    }

    .pr-right {
      width: 260px;
      margin-top: 12px;
      .tp {
        display: flex;
        margin-top: 30px;
        justify-content: center;

        .qq-about {
          i {
            margin-left: 30px;
          }
        }

        .wx-about {
          i {
            margin-left: 30px;
          }
          margin-right: 20px;
        }
      }
    }
  }
  .beian {
    margin-top: 90px;
    text-align: center;
    font-size: 12px;
  }
}
.classify-aside {
  width: 160px !important;
  position: relative;
}
.classify {
  background-color: #ffffff;
  width: 130px;
  margin-left: 25px;
  margin-top: 10px;

  ul {
    list-style-type: none;
    li {
      padding: 4px;
      cursor: pointer;
      text-align: center;
    }
    li:hover {
      background-color: #f5f6f7;
      font-weight: bold;
      border-radius: 40%;
    }
  }
}
</style>

<script>
import Carousel from './Carousel'
import Comment from '../views/comment'
import Divider from '../views/divider'
import {
  getArticle,
  getArticleClass,
  getArticleHost,
  getArticleComment,
  getArticleLiked
} from '../api/home'
import { url } from '../utils/request'
import { getTokenValueData, isAuth, removeToken } from '../utils/auth'
import marked from 'marked'
import Avatar from '../components/Avatar'
import { getWebset } from '../api/webset'
import Useprofile from './Profile/useprofile.vue'
export default {
  data () {
    return {
      dialog: false, // 用户详情弹窗
      commentfocus: false, // 评论框foucus
      commentcount: 0, // 评论数量
      like: 0, // 点击当前文章的点赞数
      isLogin: false,
      baseInfo: {
        name: '',
        logourl: require('@/assets/index.png'), // logo地址
        pics: [],
        // 网站介绍
        presentation: '',
        wxurl: '',
        qqurl: '',
        beian: ''
      },
      commentNumber: [],
      likedNumber: {},
      userInfo: {},
      classifying: '',
      classifyList: ['关于我们'],
      articleList: [
        // {
        //   id: 1,
        //   articleTitle: '灵活运用分布式锁解决数据重复插入问题',
        //   content:
        //     '分布式系统不可避免会遇到一些并发场景下的数据冲突，例如读写不一致、数据重复插入等。本文介绍一次典型的在分布式环境下，运用分布式锁解决数据重复插入问题的案例，详细地剖析了造成问题的原因和解决方案的探索。',
        //   resoutceName: require('@/assets/logo.png'),
        //     commentNum:0,
        //     likeNum:0,
        //   redaNumber,
        //    createdTime
        // },
      ], // 热榜
      hotArticleList: [], // 点赞榜
      goodArticleList: [], // 评论榜
      commentArticleList: [],
      textHidden: false,
      pager: {
        // 分页器
        pageIndex: 1,
        pageSize: 10,
        count: 40
      }
    }
  },
  components: {
    Carousel,
    Comment,
    Divider,
    Avatar,
    Useprofile
  },
  directives: {
    texthidden: {
      inserted: function (el) {
        const height = el.offsetHeight

        if (height < 155) {
          el.className = ''
        }
      }
    }
  },
  mounted () {
    // console.log('是否登录')
    // console.log(isAuth)
    this.isLogin = isAuth()

    if (isAuth()) {
      const user = getTokenValueData()
      // console.log(user)
      this.userInfo = user
    }

    // 获取栏目列表
    getArticleClass().then(({ data }) => {
      // console.log(data.data)
      this.classifyList = data.data

      this.classifying = this.classifyList[0].articleClassName

      // console.log('开始获取文章', this.classifying.articleClassName)
      // 获取文章列表
      this.fetchData(this.pager)
    })

    // 热点榜
    getArticleHost().then((res) => {
      res.data.data.forEach((item) => {
        this.hotArticleList.push({
          id: item.id,
          title: item.articleTitle
        })
      })
    })
    // 评论榜
    getArticleComment().then((res) => {
      res.data.data.b.forEach((item) => {
        this.commentArticleList.push({
          id: item.articlesId,
          title: item.articleTitle
        })
      })
    })
    // 点赞榜
    getArticleLiked().then((res) => {
      res.data.data.like.forEach((item) => {
        this.goodArticleList.push({
          id: item.articlesId,
          title: item.articleTitle
        })
      })
    })
    // 获取网站信息
    getWebset(1).then(({ data }) => {
      console.log(data)
      // this.baseInfo.wxurl.url = data.data.wxCodePicture
      this.baseInfo = data.data
      this.baseInfo.name = data.data.owner
      this.baseInfo.presentation = data.data.introduce
      this.baseInfo.wxurl = url + '/uploadfiles/' + data.data.wxCodePicture
      this.baseInfo.pics = []
      console.log(this.baseInfo.wxurl)
      this.baseInfo.qqurl = url + '/uploadfiles/' + data.data.qqCodePicture
      const arr = data.data.carouselsPicture.split(' ')
      arr.forEach((item) => {
        this.baseInfo.pics.push({
          url: url + '/uploadfiles/' + item
        })
      })
    })
  },
  computed: {},
  methods: {
    handelDialog (data) {
      this.dialog = data
    },
    // 点击logo回到首页
    handerHome () {
      this.$router.push('/')
    },
    // 页码变化更新文章列表
    handleIndex (val) {
      this.pager.pageIndex = val
    },
    fetchData (pager) {
      const arlist = pager
      arlist.articleClassName = this.classifying

      getArticle(arlist).then(({ data }) => {
        const article = data.data
        this.articleList = []

        article.data.forEach((item) => {
          const comment = article.comment.filter(
            (c) => c.articlesId === item.id
          )
          const like = article.like.filter((c) => c.articlesId === item.id)

          this.articleList.push({
            id: item.id,
            articleTitle: item.articleTitle,
            content: item.content,
            resoutceName: item.resoutceName,
            commentNum: comment.length === 0 ? 0 : comment[0].count,
            likeNum: like.length === 0 ? 0 : like[0].count,
            redaNumber: item.redaNumber,
            createdTime: item.createdTime
          })
        })

        this.pager.pageIndex = article.pager.pageIndex
        this.pager.pageSize = article.pager.pageSize
        this.pager.count = article.pager.rowsTotal
      })
    },
    // 下拉菜单点击事件
    handleCommand (comditem) {
      if (!comditem) {
        return this.$message('选项缺少command属性')
      }
      switch (comditem) {
        case 'handleProfile':
          this.handleProfile()
          break
        case 'handleAbout':
          this.handleAbout()
          break
        case 'handlelogout':
          this.handlelogout()
          break
      }
    },
    // 个人中心
    handleProfile () {
      this.dialog = true
      // console.log('个人', this.dialog)
    },
    // 注销登录
    handlelogout () {
      removeToken()
      this.isLogin = false
    },
    // 登录
    handelLogin () {
      this.$router.push('/login')
    },
    // 注册
    register () {
      this.$router.push('/register')
    },
    // 获取评论数量
    getCommentCount (count) {
      this.commentcount = count
    },
    // 详情
    handelDetails (id, num) {
      this.like = num
      this.$router.push({ name: 'article', params: { id: id } })
    },
    handelClassify (name) {
      this.classifying = name
    }
  },
  watch: {
    classifying () {
      this.fetchData(this.pager)
    }
  },
  filters: {
    contentFilter (content) {
      const html = marked(content)
      const str = html.substring(html.indexOf('<p>') + 3, html.indexOf('</p>'))

      return str
    },
    getImageUrlFilter (filename) {
      if (filename.includes('http')) return filename
      return url + '/uploadfiles/' + filename
    }
  }
}
</script>
